<template>
  <div class="bank-data">

    <a-row :gutter="30">
      <a-col :span="12">
        <a-card title="每日数据变化" :bordered="false">
          <!-- <a-card :span="24"> -->

          <!-- </a-card> -->
          <div style="background: #ffffff; padding: 5px">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-card>
                  <a-statistic
                    title="题库总数量"
                    :value="pieData.common + pieData.system"
                  />
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card>
                  <a-statistic
                    title="静态题库"
                    :value="pieData.common"
                    :precision="0"
                    :value-style="{ color: '#3f8600' }"
                  >
                    <!-- <template #prefix>
                      <a-icon type="arrow-up" />
                    </template> -->
                  </a-statistic>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card>
                  <a-statistic
                    title="动态题库"
                    :value="pieData.system"
                    :precision="0"
                    class="demo-class"
                    :value-style="{ color: '#cf1322' }"
                  >
                    <!-- <template #prefix>
                      <a-icon type="arrow-down" />
                    </template> -->
                  </a-statistic>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
      <a-col :span="12" style="text-align: left">
        <a-card title="题库数量变化分析" :bordered="false">
          <div class="explain">
            <p>
              目前，题库总数是{{pieData.common + pieData.system}}，其中静态题库为{{pieData.common}}，动态题库为{{pieData.system}}<br />
              静态题库与动态题库的比率为{{ (pieData.common/pieData.system*100).toFixed(2) }}%。
            </p>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <!-- <echart-line :msg="userMsg" class="echart"></echart-line> -->
    <!-- <a-row :gutter="[24, 40]">
      <a-col :span="24">
        <a-card title="题库占比">
          <echart-pie v-if="Object.keys(pieData).length !== 0" :pie-data="pieData"></echart-pie>
        </a-card>
      </a-col>
    </a-row> -->
    

    
 
  </div>
</template>

<script>
import EchartPie from "./EchartPie";
import { getBankData } from '../../../../network/visual'
export default {
  name: "BankData",
  components: {
    EchartPie,
  },
  data() {
    return {
      pieData: {}
    };
  },
  async created() {
    const res = await getBankData()
    if(res.data.code === 200) {
      console.log(res);
      this.pieData = res.data.data
      console.log(this.pieData);
    }
  }
};
</script>

<style lang="less" scoped>
.bank-data {
  padding: 40px;
  text-align: center;
  .explain {
    margin-top: 20px;
  }
}
</style>
